<template>
  <div class="care-edit-container">
    <el-card class="edit-card">
      <template #header>
        <div class="card-header">
          <div class="title">
            <el-icon class="title-icon"><Document /></el-icon>
            {{ isEdit ? '编辑护理记录' : '新增护理记录' }}
          </div>
          <div class="header-actions">
            <el-button @click="goBack" class="cancel-button">取消</el-button>
            <el-button type="primary" @click="submitForm" class="submit-button">保存</el-button>
          </div>
        </div>
      </template>

      <el-form 
        ref="formRef" 
        :model="formData" 
        :rules="rules" 
        label-width="120px"
        label-position="right"
        class="care-form"
      >
        <!-- 基本信息 -->
        <div class="form-section">
          <div class="section-title">
            <el-icon><InfoFilled /></el-icon>
            <span>基本信息</span>
          </div>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="关联老人" prop="elderlyId">
                <el-input 
                  v-model="formData.elderlyId" 
                  placeholder="请输入老人ID"
                  class="form-input"
                >
                  <template #prefix>
                    <el-icon><User /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="护理员" prop="caregiverId">
                <el-input 
                  v-model="formData.caregiverId" 
                  placeholder="请输入护理员ID"
                  class="form-input"
                >
                  <template #prefix>
                    <el-icon><Avatar /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="护理时间" prop="careTime">
                <el-date-picker
                  v-model="formData.careTime"
                  type="datetime"
                  placeholder="选择护理时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DDTHH:mm:ss"
                  class="form-datepicker"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="护理项目" prop="itemId">
                <el-input 
                  v-model="formData.itemId" 
                  placeholder="请输入护理项目ID"
                  class="form-input"
                >
                  <template #prefix>
                    <el-icon><List /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="护理类型" prop="careType">
            <el-select 
              v-model="formData.careType" 
              placeholder="请选择护理类型"
              clearable
              class="form-select"
            >
              <el-option
                v-for="(label, value) in careTypeOptions"
                :key="value"
                :label="label"
                :value="Number(value)"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="护理内容" prop="careContent">
            <el-input
              v-model="formData.careContent"
              type="textarea"
              :rows="3"
              placeholder="请输入护理内容"
              class="form-textarea"
            />
          </el-form-item>
        </div>

        <!-- 状态与评价 -->
        <div class="form-section">
          <div class="section-title">
            <el-icon><Setting /></el-icon>
            <span>状态与评价</span>
          </div>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="状态" prop="status">
                <el-select 
                  v-model="formData.status" 
                  placeholder="请选择状态"
                  clearable
                  class="form-select"
                >
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="评价" prop="evaluation">
                <el-select 
                  v-model="formData.evaluation" 
                  placeholder="请选择评价"
                  clearable
                  class="form-select"
                >
                  <el-option
                    v-for="item in evaluationOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="formData.remark"
              type="textarea"
              :rows="2"
              placeholder="请输入备注信息"
              class="form-textarea"
            />
          </el-form-item>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

  
  <script setup>
  import { ref, reactive, onMounted, computed } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { findById, save } from '@/api/careRecord'
  import { ElMessage } from 'element-plus'
  import dayjs from 'dayjs'
  
  const route = useRoute()
  const router = useRouter()
  const formRef = ref()
  
  // 护理类型选项
  const careTypeOptions = {
    1: '基础护理',
    2: '康复护理',
    3: '心理护理',
    4: '医疗护理',
    5: '其他护理'
  }
  
  // 状态选项
  const statusOptions = ref([
    { label: '待执行', value: 0 },
    { label: '已完成', value: 1 },
    { label: '异常', value: 2 },
    { label: '已取消', value: 3 }
  ])
  
  // 评价选项
  const evaluationOptions = ref([
    { label: '未评价', value: 0 },
    { label: '非常不满意', value: 1 },
    { label: '不满意', value: 2 },
    { label: '一般', value: 3 },
    { label: '满意', value: 4 },
    { label: '非常满意', value: 5 }
  ])
  
  // 表单数据
  const formData = reactive({

  })
  
  // 是否是编辑模式
  const isEdit = computed(() => route.query.id !== undefined)
  
  // 表单验证规则
  const rules = {
    elderlyId: [
      { required: true, message: '请输入老人ID', trigger: 'blur' }
    ],
    caregiverId: [
      { required: true, message: '请输入护理员ID', trigger: 'blur' }
    ],
    careTime: [
      { required: true, message: '请选择护理时间', trigger: 'change' }
    ],
    careType: [
      { required: true, message: '请选择护理类型', trigger: 'change' }
    ],
    careContent: [
      { required: true, message: '请输入护理内容', trigger: 'blur' }
    ]
  }
  
  // 加载护理记录数据（编辑模式）
  const loadCareRecordData = async (id) => {
    try {
      const res = await findById(id)
      Object.assign(formData, res.data)
      
      // 格式化时间
      if (res.data.careTime) {
        formData.careTime = dayjs(res.data.careTime).format('YYYY-MM-DD HH:mm:ss')
      }
    } catch (error) {
      console.error('加载护理记录失败:', error)
      ElMessage.error('加载护理记录失败')
    }
  }
  
  // 提交表单
  const submitForm = async () => {
    try {
      await formRef.value.validate()
      
      // 准备提交数据
      const submitData = {
        ...formData,
        // 确保数字类型的字段正确转换
        careType: Number(formData.careType),
        status: Number(formData.status),
        evaluation: Number(formData.evaluation),
        itemId: formData.itemId ? Number(formData.itemId) : null,
       
        careTime: formData.careTime ? dayjs(formData.careTime).format('YYYY-MM-DDTHH:mm:ss') : null,
        
      }
      
      if (isEdit.value) {
        await save(submitData)
        ElMessage.success('护理记录更新成功')
      } else {
        await save(submitData)
        ElMessage.success('护理记录添加成功')
      }
      
      goBack()
    } catch (error) {
      console.error('保存失败:', error)
      if (!error.response) {
        ElMessage.error('表单验证失败，请检查输入')
      }
    }
  }
  
  // 返回上一页
  const goBack = () => {
    router.go(-1)
  }
  
  onMounted(() => {
    if (isEdit.value) {
      loadCareRecordData(route.query.id)
    } else {
      // 新增时设置默认护理时间为当前时间
      formData.careTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
    }
  })
  </script>
  
  <style scoped>
  .care-edit-container {
    padding: 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
    min-height: 100vh;
  }
  
  .edit-card {
    margin: 0 auto;
    max-width: 1000px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border: none;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background: linear-gradient(120deg, #4a6bdf 0%, #3a56c4 100%);
  }
  
  .title {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    color: white;
  }
  
  .title-icon {
    margin-right: 12px;
    font-size: 24px;
    color: #ffd04b;
  }
  
  .header-actions {
    display: flex;
    gap: 12px;
  }
  
  .cancel-button,
  .submit-button {
    height: 40px;
    padding: 0 24px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
  }
  
  .submit-button {
    background: linear-gradient(120deg, #4a6bdf 0%, #3a56c4 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(65, 105, 225, 0.3);
  }
  
  .submit-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(65, 105, 225, 0.4);
  }
  
  .care-form {
    padding: 20px 30px;
  }
  
  .form-section {
    margin-bottom: 30px;
  }
  
  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f4f8;
    color: #4a6bdf;
    font-size: 16px;
    font-weight: 600;
  }
  
  .section-title .el-icon {
    margin-right: 10px;
    font-size: 20px;
  }
  
  .form-input :deep(.el-input__inner) {
    height: 42px;
    border-radius: 8px;
    padding-left: 36px;
  }
  
  .form-select {
    width: 100%;
  }
  
  .form-select :deep(.el-input__inner) {
    height: 42px;
    border-radius: 8px;
  }
  
  .form-datepicker {
    width: 100%;
  }
  
  .form-datepicker :deep(.el-input__inner) {
    height: 42px;
    border-radius: 8px;
  }
  
  .form-textarea :deep(.el-textarea__inner) {
    border-radius: 8px;
    padding: 12px;
    line-height: 1.5;
  }
  
  /* 响应式设计 */
  @media (max-width: 768px) {
    .card-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }
    
    .header-actions {
      width: 100%;
      justify-content: flex-end;
    }
    
    .el-col {
      width: 100%;
      margin-bottom: 15px;
    }
  }
  </style>